<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			为什么要给ul添加一个父级元素?
			当给ul添加margin-right: -10px;时,是给这个ul向右添加了10pxmargin值,以此来
			满足最后一个li标签的margin-right,但是此时问题来了,要实现左中右布局,最后一个li右边多了10px,就要
			去除掉去.可以给ul添加一个父元素,虽然此时ul拓宽了10px,但是实际上他的父元素还是保持原本的宽度,所以
			这时候给这个父元素添加overflow: hidden;就可以去除ul拓宽的宽度
			
			利用了子元素可以通过Margin负值来拓宽宽度,但是父元素宽度不变的想法来实现这个布局
			*/
			div{
				display: inline-block;
				overflow: hidden;
			}
			ul{
				margin-right: -10px;
				padding: 0;
				height: 20px;
				background-color: #00FFFF;
			}
			li{
				list-style: none;
				float: left;
				width: 90px;
				background-color: #CCCCCC;
				margin-right: 10px;
			}
			
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>我是左边</li>
				<li>我是中间</li>
				<li>我是右边</li>
			</ul>
		</div>
	</body>
</html>
